<template>
  <div class="profile-page">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="profile-card">
          <div class="profile-header">
            <el-avatar
                :size="120"
                src=""
            >
              <el-icon><UserFilled /></el-icon>
            </el-avatar>
            <h2>{{ profile.studentInfo.baseInfo.name }}</h2>
            <p class="title">学生</p>
          </div>
          <el-divider />
          <div class="profile-info">
            <div class="info-item">
              <el-icon><School /></el-icon>
              <span>{{ profile.collegeInfo.name }}</span>
            </div>
            <div class="info-item">
              <el-icon><Phone /></el-icon>
              <span>{{ profile.studentInfo.baseInfo.phone }}</span>
            </div>
          </div>
          <el-button
              type="primary"
              class="edit-button"
              @click="handleEdit"
          >
            编辑资料
          </el-button>
        </el-card>
      </el-col>

      <el-col :span="16">
        <el-card>
          <template #header>
            <div class="card-header">
              <h3>详细信息</h3>
            </div>
          </template>

          <el-descriptions :column="2" border>
            <el-descriptions-item label="学号">{{ profile.studentInfo.baseInfo.campusId }}</el-descriptions-item>
            <el-descriptions-item label="姓名">{{ profile.studentInfo.baseInfo.name }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{ profile.studentInfo.baseInfo.sex }}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{ profile.studentInfo.baseInfo.phone }}</el-descriptions-item>
            <el-descriptions-item label="生日">{{ profile.studentInfo.birthday }}</el-descriptions-item>
            <el-descriptions-item label="家庭住址">{{ profile.studentInfo.homeAddress }}</el-descriptions-item>
            <el-descriptions-item label="学院">{{ profile.collegeInfo.name }}</el-descriptions-item>
            <el-descriptions-item label="专业">{{ profile.majorInfo.name }}</el-descriptions-item>
            <el-descriptions-item label="班级">{{ profile.classInfo.name }}</el-descriptions-item>
            <el-descriptions-item label="个人简介" :span="2">{{ profile.studentInfo.biography }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>

    <!-- 编辑对话框 -->
    <el-dialog
        v-model="dialogVisible"
        title="编辑个人资料"
        width="600px"
    >
      <el-form
          ref="formRef"
          :model="editForm"
          :rules="rules"
          label-width="100px"
      >

        <el-form-item label="学号" prop="campusId">
          <el-input :model-value="editForm.campusId" disabled/>
        </el-form-item>

        <el-form-item label="姓名" prop="name">
          <el-input v-model="editForm.name" disabled/>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-input v-model="editForm.sex" />
        </el-form-item>

        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="editForm.phone" />
        </el-form-item>

        <el-form-item label="生日" prop="birthday">
          <el-date-picker v-model="editForm.birthday"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :max-date="new Date()"/>
        </el-form-item>
        <el-form-item label="家庭住址" prop="homeAddress">
          <el-input v-model="editForm.homeAddress" />
        </el-form-item>

        <el-form-item label="个人简介" prop="bio">
          <el-input
              v-model="editForm.bio"
              type="textarea"
              :rows="4"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="submitting">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import {
  UserFilled,
  School,
  Phone,
} from '@element-plus/icons-vue'
import axios from "axios";
import baseURL from "@/config/config.js";
// 个人信息数据
const profile = ref({
  "studentInfo": {
    "baseInfo": {
      "campusId": "",
      "name": "",
      "phone": "",
      "sex": ""
    },
    "studentId": "",
    "classId": 0,
    "birthday": "",
    "biography": "",
    "homeAddress": ""
    },
  "classInfo": {
    "classId": 0,
    "name": "",
    "collegeId": 0,
    "major": "",
    "teacherId": ""
  },
  "majorInfo": {
    "majorId": "",
    "name": "",
    "college": 0
  },
  "collegeInfo": {
    "collegeId": "",
    "name": ""
  }
})

// 编辑表单
const dialogVisible = ref(false)
const submitting = ref(false)
const formRef = ref(null)

const editForm = reactive({
  campusId: '',
  name: '',
  sex: '',
  phone: '',
  birthday: '',
  homeAddress: '',
  bio: '',
})

// 表单验证规则
const rules = {
  phone: [
    { required: false, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ]
}


// 处理编辑按钮点击
const handleEdit = () => {
  Object.assign(editForm, {
    campusId: profile.value.studentInfo.baseInfo.campusId,
    name: profile.value.studentInfo.baseInfo.name,
    sex: profile.value.studentInfo.baseInfo.sex,
    phone: profile.value.studentInfo.baseInfo.phone,
    birthday: profile.value.studentInfo.birthday,
    homeAddress: profile.value.studentInfo.homeAddress,
    bio: profile.value.studentInfo.biography,
  })
  dialogVisible.value = true
}

// 处理表单提交
const handleSubmit = () => {
  if (!formRef.value) return

  formRef.value.validate((valid) => {
    if (valid) {
      submitting.value = true

      axios({
        method: 'POST',
        url: baseURL + '/student/update',
        data: editForm,
        headers: {
          Authorization: 'Bearer ' + localStorage.getItem('token')
        }
      }).then(res => {
        Object.assign(profile, editForm)
        ElMessage.success('保存成功')
        profile.value = res.data.data
      }).catch(() => {
        ElMessage.error('保存失败')
      }).finally(() => {
          dialogVisible.value = false
          submitting.value = false
        })

    }
  })
}

onMounted(() => {
  axios({
    method: 'get',
    url: baseURL + '/student/get-detail-info',
    headers: {
      Authorization: `Bearer ${localStorage.getItem('token')}`
    }
  }).then(res => {
    console.log("学生详细信息", res)
    profile.value = res.data.data
  }).catch(() => {
    ElMessage.success('获取失败，请稍后重试')
  })
})
</script>

<style scoped>
.profile-page {
  padding: 20px;
}

.profile-card {
  text-align: center;
}

.profile-header {
  padding: 20px 0;
}

.profile-header h2 {
  margin: 15px 0 5px;
  font-size: 20px;
  color: #1f2937;
}

.profile-header .title {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
}

.profile-info {
  text-align: left;
  padding: 0 20px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  color: #4b5563;
}

.info-item .el-icon {
  font-size: 18px;
  color: var(--el-color-primary);
}

.edit-button {
  width: 100%;
  margin-top: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  color: #1f2937;
}

.course-tag {
  margin-right: 8px;
  margin-bottom: 4px;
}

.avatar-uploader {
  text-align: center;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  border: 1px dashed var(--el-border-color);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.el-card__header) {
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>